<template>
  <header>
    <!-- Header Start -->
    <div class="header-area">
      <div class="main-header ">
        <div class="header-top d-none d-lg-block">
          <div class="container-fluid">
            <div class="col-xl-12">
              <div class="row d-flex justify-content-between align-items-center">
                <div class="header-info-left d-flex">
                  <ul>
                    <li>联系电话: +86 18234503599</li>
                    <li>邮箱: 3228314370@qq.com</li>
                  </ul>
                </div>
                <div class="header-info-right d-flex align-items-center">
                  <div class="select-this">

                  </div>
                  <ul class="contact-now">
                    <li><a>苏半夏</a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="header-bottom  header-sticky">
          <div class="container-fluid">
            <div class="row align-items-center">
              <!-- Logo -->
              <div class="col-xl-2 col-lg-2">
                <div class="logo">
                  <Weather/>
                </div>
              </div>
              <div class="col-xl-10 col-lg-10">
                <div class="menu-wrapper  d-flex align-items-center justify-content-end">
                  <!-- Main-menu -->
                  <div class="main-menu d-none d-lg-block">
                    <nav>
                      <ul id="navigation">
                        <li><router-link to="/">主 页</router-link></li>
                        <li><router-link to="/category">文章分类</router-link></li>
                        <li><router-link to="/about">个人介绍</router-link></li>
                        <li><router-link to="/link">友 链</router-link></li>
                        <li><router-link to="/contact">留 言</router-link></li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
              <!-- Mobile Menu -->
              <div class="col-12">
                <div class="mobile_menu d-block d-lg-none">

                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Header End -->
  </header>
</template>

<script>
import Weather from './weather'
export default {
  name: "header",
  components: {
    Weather
  },
  created() {

  }
}
</script>

<style scoped>
.router-link-active {
  text-decoration-line: none
}

a:hover{
  text-decoration-line: none
}
</style>
